import PropTypes from 'prop-types'
import React, { memo } from 'react'
import { RoomWrapper } from './style'
import { Rating } from '@mui/material'

const RoomItem = memo((props) => {
  const {itemData, roomWidth = '25%'} = props
  return (
    <RoomWrapper verify-color={itemData?.verify_info?.text_color || '#39576a'} roomwidth={roomWidth}>
      <div className="inner">
        <div className='cover'>
          <img src={itemData.picture_url} alt="" />
        </div>
        <div className='desc'>
          {itemData.verify_info.messages.join(" · ")}
        </div>
        <div className='name'>{itemData.name}</div>
        <div className='price'>¥{itemData.price}/晚</div>
        <div className="bottom">
          {/* ?? 代表 undefind或null时取后面的值 */}
          <Rating 
            sx={{fontSize: '12px', color: '#00848A', marginRight: '-1px'}}
            value={itemData.star_rating ?? 5} 
            precision={0.1} 
            readOnly />
            <span className="count">{itemData.reviews_count}</span>
            {
              itemData.bottom_info && <span className="extra">·{ itemData.bottom_info?.content }</span>
            }
        </div>
      </div>
    </RoomWrapper>
  )
})

RoomItem.propTypes = {
  itemData: PropTypes.object,
  roomWidth: PropTypes.string
}

export default RoomItem